<template>
  <div class="login-page">
    <div class="login-content">
      <van-nav-bar>
        <template #title>
          <div class="title"> 注册 </div>
        </template>
      </van-nav-bar>
      <van-form @submit="submit" :model-value="formData" class="form-content">
        <van-field
          v-model="formData.account"
          name="account"
          placeholder="请输入邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }]"
        />
        <div class="captcha-container">
          <van-field v-model="formData.captcha" name="captcha" placeholder="验证码" :rules="[{ required: true, message: '请填写验证码' }]">
            <template #button>
              <van-button size="small" type="default" @click="getCaptcha">发送验证码</van-button>
            </template>
          </van-field>

          <!--          <van-button round hairline plain type="default" size="small" class="captcha-button" @click="getCaptcha">获取验证码</van-button>-->
        </div>

        <van-field
          v-model="formData.password"
          type="password"
          name="password"
          placeholder="请设置密码"
          :rules="[{ required: true, message: '请设置密码' }]"
        />
        <van-field
          v-model="password1"
          type="password"
          name="password1"
          placeholder="请确认密码"
          :rules="[
            { required: true, message: '请确认密码' },
            { validator: validatePasswordConfirmation, trigger: 'blur' },
          ]"
        />
        <div style="margin: 20px">
          <van-button block type="primary" native-type="submit">注册</van-button>
        </div>
      </van-form>
      <router-link to="/login" class="link">已有账号，前往登录</router-link>
    </div>
  </div>
</template>

<script lang="ts" setup name="LoginPage">
  import { reactive, ref } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { captchaRegister, sendRegisterCaptchaByEmail } from '@/api/user';
  import { message } from 'ant-design-vue';
  // import { encryptByMd5 } from "@/utils/common";

  const userStore = useUserStore();
  const router = useRouter();
  const password1 = ref('');
  const formData = reactive({
    account: '',
    captcha: '',
    password: '',
  });
  const ruleForm = ref<any>(null);
  const submit = async () => {
    // formData.password = encryptByMd5(formData.password);
    const { account, password, captcha } = formData;
    // ruleForm.value.validate().then(async ({ valid, errors }: any) => {
    //   if (valid) {
    const res = await captchaRegister({ account, captcha, password });
    if (res) {
      console.info('登录后返回的参数===>', res);
      userStore.setInfo(res.data?.info);
      userStore.setToken(res.data?.token);
      router.push({ path: '/home' });
    }
    // }
    // else {
    //   console.log('error submit!!', errors);
    // }
    // });
  };

  const validatePasswordConfirmation = (value) => {
    if (value === formData.password) {
      return true;
    }
    return '两次输入的密码不一致';
  };

  const getCaptcha = async () => {
    const { account } = formData;
    const res = await sendRegisterCaptchaByEmail({ email: account });
    if (res) {
      message.success(res?.msg);
    }
  };
</script>

<style scoped lang="scss">
  .login-page {
    box-sizing: border-box;
    height: 100vh;
    display: flex;
    overflow-y: scroll;
    overflow-x: hidden;
    background-image: url('@/assets/login.png');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
    .login-content {
      margin: auto;
      padding: 40px 40px 100px 40px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      opacity: 0.85;
      .title {
        font-size: 40px;
        font-weight: 600;
      }
      .form-content {
        .captcha-container {
          display: flex;
          align-items: center; /* 这将使按钮在垂直方向上居中 */
          .captcha-button {
            white-space: nowrap;
            margin-right: 20px;
          }
        }
      }
    }

    .link {
      font-size: 25px;
      color: #069;
      float: right;
      margin-right: 20px;
    }
  }
</style>
